<template>
  <b-col class="mr-4 mb-3 comment">
    <!-- 楼中楼结构体 循环 -->
    <b-row v-for="c in commentList.data" :key="c.id">
      <InfoView :key="c.id" :comment="c" :id="coid" :commentList="commentList"
        :time="c.time" />
    </b-row>
    <!-- 是否有下一页 -->
    <b-row @click="more" v-if="commentList.total -  commentList.page * commentList.size <= 0 ? false : true" class="text-center mt-2">
      <b-col>
        <b-link>显示更多({{commentList.total -  commentList.page * commentList.size}})</b-link>
      </b-col>
    </b-row>
  </b-col>
</template>
<script>
import InfoView from './InfoView'
export default {
  props: {
    //所属评论的id
    coid: String,
    //所属评论的评论列表
    data: Object,
  },
  components: {
    InfoView,
  },
  data() {
    return {
      //父组件传来的数据
      commentList: {
        total: 0,
        page: 0,
        size: 0,
        data: {}
      },
      //顺序状态
      order: 1,
    }
  },
  created() {
    this.commentList = this.data;
    // console.log(this.data);
  },
  mounted() {
    // console.log(this.data);
  },
  methods: {
    //展开评论
    more() {
      this.$httpIssue.getEntityCommentList(this.commentList.page + 1, this.coid, this.order).then((res) => {
        var newObj = this.commentList.data;
        for (let i = 0; i < res.data.length; i++) {
          newObj.push(res.data[i]);
        }
        this.commentList = res;
        this.commentList.data = newObj;
      })
    },
  },
}
</script>
<style scoped>
.comment {
  background-color: rgb(247, 247, 247);
  border: solid 1px #e8e8e8;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(81, 81, 81, 0.1);
}
</style>
